<template>
  <div class="sjm">
  <el-calendar  ref="calendar">
    <template #header="{ date }">
      <span><div class="calendar-day-text">日历/日常安排</div></span>
      <el-button-group>
        <el-button size="small" @click="selectDate('prev-month')">
          Previous Month
        </el-button>
        <el-button size="small" @click="selectDate('today')">Today</el-button>
        <el-button size="small" @click="selectDate('next-month')">
          Next Month
        </el-button>
      </el-button-group>
    </template>
  </el-calendar>
  </div>
</template>

<style>
/*:root{*/
/*--el-calendar-cell-width:24px*/
/*}*/
.sjm .el-calendar-table .el-calendar-day{
  height: 1.7rem;
  text-align: center;
  display: flex;
  align-items: center;
}
.calendar-day-text {
  display: flex;
  justify-content: center;
}
.el-calendar{
width: 400px;
  height: 200px;
  position: relative;
}
.sjm{
  height: 400px;
  width: 500px;
}
</style>
<script lang="ts" setup>
import { ref } from 'vue'
import type { CalendarDateType, CalendarInstance } from 'element-plus'

const calendar = ref<CalendarInstance>()
const selectDate = (val: CalendarDateType) => {
  if (!calendar.value) return
  calendar.value.selectDate(val)
}

</script>

